import regexp from './regexp'
import beautify from './beautify'

// 编辑区美化dom
class EditDomBeautify {
    d = document // 保存document
    regexp = regexp // 正则
    beautify = beautify // 局部美化代码

    constructor() {
    }

    /**
     * 设置要美化的字符串
     * @param {String} str
     * @param return 返回生成的富文本
     */
    setBeautifyStr (str, fn) {
        let strList = str.split('\n')

        let finalList = this.handleList(strList)

        let { fragment, fragmentStr } = this.handleDom(finalList)

        fn({ fragment, fragmentStr })
    }

    /**
     * 过滤源数组
     */
    handleList (strList) {
        // 保存过滤后的数组
        let finalList = []

        // 是否是 空字符串 或 空格
        function enter (value) {
            // (/\s/)过滤这种情况 ‘     ’(多个空格)
            return value === '' || !(/\S/.test(value))
        }
        // 过滤原生md代码
        strList.map((item, index, arr) => {
            // 当前数组的上一个值
            let prev = index === 0 ? arr[0] : arr[index - 1]
            // 获取最后一个过滤后数组的值
            let finalListPop = finalList.pop() || {
                text: [],
                enter: [],
            }

            // 是否是回车(空字符窜)
            if (enter(item)) return finalList.push({
                text: [...finalListPop.text],
                enter: [...finalListPop.enter, '<br>'],
            })

            // 上一个是文本 并且 这次也是文本
            if (index && !enter(item) && !enter(prev)) {

                return finalList.push({
                    text: [...finalListPop.text, item],
                    enter: [...finalListPop.enter],
                })
            }

            Object.keys(finalListPop.text).length && finalList.push(finalListPop)
            finalList.push({
                text: [`${item}`],
                enter: [],
            })
        })

        return finalList
    }

    /**
     * 处理原生md代码列表 生成美化后的dom
     * @param {Array} finalList
     * @param return 美化后的dom
     */
    handleDom (finalList) {
        // fragment节点
        let fragment = this.d.createDocumentFragment()

        let HTMLDiv = this.d.createElement('div')
        // html字符串
        let HTMLStr = ''

        finalList.forEach((item, index) => {
            let node = this.splicingDom(item)

            fragment.appendChild(node)
            HTMLDiv.appendChild(node)
        })
        return { fragment, fragmentStr: HTMLDiv.innerHTML }
    }

    /**
     * 拼接节点
     * @param valObj
     * @returns {HTMLDivElement}
     */
    splicingDom (valObj) {
        let {text, enter} = valObj
        let oDiv = this.createContainerDom()

        // 添加内容
        text.forEach(item => {
            let oSpan = this.localBeautify(item)
            let oEnter = this.createEnterDom()

            oDiv.appendChild(oSpan)
            // 没段文字后面必须加一个回车（br标签）
            oDiv.appendChild(oEnter)
        })

        // 添加回车标签
        enter.forEach(item => {
            let oEnter = this.createEnterDom()
            oDiv.appendChild(oEnter)
        })
        return oDiv
    }

    /**
     * 局部美化
     */
    localBeautify (text) {
        let className = ''
        this.regexp.forEach(item => {
            if (item.regexp.test(text)) {
                className = item.label
                // 如果spareRegexp 不存在 则 regexp作为第二个参数
                let spareRegexp = item.spareRegexp || item.regexp
                text = this.beautify[item.label](text, spareRegexp)
                return
            }
        })

        let oSpan = this.createSpan()
        oSpan.className = `l-${className || 'text'}`
        oSpan.innerHTML = text
        return oSpan
    }

    /**
     * 外层容器
     */
    createContainerDom () {
        let container = this.d.createElement('div')
        container.className = 'l-container'
        return container
    }

    /**
     * 生成span标签
     */
    createSpan () {
        return this.d.createElement('span')
    }

    /**
     * 生成回车标签
     */
    createEnterDom () {
        let span = this.createSpan()
        span.innerHTML = `<br>`
        span.className = 'l-span-br'
        return span
    }
}

Object.assign(EditDomBeautify.prototype, {



})

export default EditDomBeautify
